{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/forms/jquery-ui-timepicker-addon/theme/dark.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/forms/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.css') }}" rel="stylesheet" type="text/css" media="all" />

	<link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
	<link href="{{ asset('bundles/applicationbootstrap/css/sliders/jquery-ui/sliders.css') }}" rel="stylesheet" type="text/css" media="all" />
	
	<style type="text/css">
	    .form-control-feedback.text-danger{
	        color: #a94442;
	    }
	    #ui-datepicker-div, .ui-datepicker{
           font-size:12px;
        }
	</style>
	
	<link href="{{ asset('bundles/applicationbootstrap/css/forms/select2/select2.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/forms/select2/select2-bootstrap.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/forms/checkbox_radio/checkbox_radio_web-font.css') }}" rel="stylesheet" type="text/css" media="all" />
    
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js') }}" type="text/javascript"></script>
    {# jquery-ui.min.js musi być załadowane przed bootstrap.min.js, żeby mógł działać tooltip #}
    <script src="{{ asset('bundles/applicationbootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/forms/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.js') }}" type="text/javascript"></script>
    
	<script type="text/javascript">
		$(document).ready(function(){
		
	        //Activate tooltips
	        $("[data-toggle='tooltip']").tooltip();
	
	        //Activate popovers
	        $("[data-toggle='popover']").popover();
	        
            $('#datepicker').datepicker({ 
                dateFormat: "dd/mm/yy", // dd-mm-yy, yy-mm-dd
                beforeShow: function() {
                    setTimeout(function(){
                        $('.ui-datepicker').css('z-index', 100);
                    }, 0);
                }
            });
            
            $('.timepicker').timepicker({
                beforeShow: function() {
                    setTimeout(function(){
                        $('.ui-datepicker').css('z-index', 100);
                    }, 0);
                }
            });
		});
	</script>
	
	<script src="{{ asset('bundles/applicationbootstrap/js/forms/select2/select2.js') }}" type="text/javascript"></script>

    <script type="text/javascript">
        //
        // Function for create test sliders on Progressbar page
        //
        function FormLayoutExampleInputLength(selector){
            var steps = [
                "col-sm-1",
                "col-sm-2",
                "col-sm-3",
                "col-sm-4",
                "col-sm-5",
                "col-sm-6",
                "col-sm-7",
                "col-sm-8",
                "col-sm-9",
                "col-sm-10",
                "col-sm-11",
                "col-sm-12"
            ];
            selector.slider({
               range: 'min',
                value: 1,
                min: 0,
                max: 11,
                step: 1,
                slide: function(event, ui) {
                    if (ui.value < 1) {
                        return false;
                    }
                    var input = $("#form-styles");
                    var f = input.parent();
                    f.removeClass();
                    f.addClass(steps[ui.value]);
                    input.attr("placeholder",'.'+steps[ui.value]);
                }
            });
        }

        $(document).ready(function() {
            // Make all sliders on page
            FormLayoutExampleInputLength($( ".slider-range" ));
        });
    </script>

    <script src="{{ asset('bundles/applicationbootstrap/js/editors/tinymce/tinymce.min.js') }}" type="text/javascript"></script>
    <script type="text/javascript">

        tinymce.init({
            selector: "#wysiwig_simple"
        });

        tinymce.init({
            selector: "#wysiwig_full",
            theme: "modern",
            plugins: [
                "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars code fullscreen",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "emoticons template paste textcolor colorpicker textpattern"
            ],
            toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
            toolbar2: "print preview media | forecolor backcolor emoticons",
            image_advtab: true,
            templates: [
                {title: 'Test template 1', content: 'Test 1'},
                {title: 'Test template 2', content: 'Test 2'}
            ]
        });

        tinymce.init({
            selector: "h1.editable",
            inline: true,
            toolbar: "undo redo",
            menubar: false
        });

        tinymce.init({
            selector: "div.editable",
            inline: true,
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste"
            ],
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
        });

    </script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Advancet registration form</h1>
        </div>
        <div class="row">
        	<div class="col-lg-12">
				<form class="form-horizontal" role="form">
					<div class="form-group">
					    <label class="col-sm-2 control-label">First name</label>
					    <div class="col-sm-4">
					        <input type="text" class="form-control" placeholder="First name" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip for name">
					    </div>
					    <label class="col-sm-2 control-label">Last name</label>
					    <div class="col-sm-4">
					        <input type="text" class="form-control" placeholder="Last name" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip for last name">
					    </div>
					</div>
					<div class="form-group has-success has-feedback">
					    <label class="col-sm-2 control-label">Company</label>
					    <div class="col-sm-4">
					        <input type="text" class="form-control" placeholder="Company">
					    </div>
					    <label class="col-sm-2 control-label">Address</label>
					    <div class="col-sm-4">
					        <input type="text" class="form-control" placeholder="Address">
					        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
					    </div>
					</div>
					<div class="form-group has-warning has-feedback">
					    <label class="col-sm-2 control-label">Residence</label>
					    <div class="col-sm-2">
					        <input type="text" class="form-control" placeholder="City">
					        <span class="glyphicon glyphicon-pushpin form-control-feedback"></span>
					    </div>
					    <div class="col-sm-2">
					        <input type="text" class="form-control" placeholder="Country">
					        <span class="glyphicon glyphicon-remove form-control-feedback text-danger"></span>
					    </div>
					    <label class="col-sm-2 control-label">CODE</label>
					    <div class="col-sm-2">
					        <input type="text" class="form-control" placeholder="Another info" data-toggle="tooltip" data-placement="top" title="" data-original-title="Hello world!">
					    </div>
					    <div class="col-sm-2 web-font">
					        <div class="checkbox">
					        	<label>
					                <input type="checkbox" checked> No exist <i class="fa fa-square-o small"></i>
					        	</label>
					        </div>
					    </div>
					</div>
					<div class="form-group has-warning">
					    <label class="col-sm-2 control-label">Select you OS</label>
					    <div class="col-sm-4">
					        <select multiple class="form-control select2-multiple">
							  <option>Linux</option>
							  <option>Windows</option>
							  <option>OpenSolaris</option>
							  <option>FirefoxOS</option>
							  <option>MeeGo</option>
							  <option>Android</option>
							  <option>Sailfish OS</option>
							  <option>Plan9</option>
							  <option>DOS</option>
							  <option>AIX</option>
							  <option>HP/UP</option>
					        </select>
					    </div>
					    <label class="col-sm-2 control-label">Tooltip for inputs</label>
					    <div class="col-sm-2">
					        <input type="text" class="form-control" placeholder="Another info" data-toggle="tooltip" data-placement="top" title="" data-original-title="Hello world!">
					    </div>
					    <div class="col-sm-2">
					    	<p class="help-block">only example</p>
					    </div>
					</div>
					<div class="form-group has-error has-feedback">
					    <label class="col-sm-2 control-label">Date</label>
					    <div class="col-sm-2">
					        <input type="text" class="form-control" placeholder="Date" id="datepicker">
					        <span class="glyphicon glyphicon-calendar form-control-feedback"></span>
					    </div>
					    <div class="col-sm-2">
					        <input type="text" class="form-control timepicker" placeholder="Time">
					        <span class="glyphicon glyphicon-time form-control-feedback"></span>
					    </div>
					    <label class="col-sm-2 control-label">Disabled input</label>
					    <div class="col-sm-2">
					        <input type="text" class="form-control" placeholder="No info" data-toggle="tooltip" data-placement="top" title="" data-original-title="Hello world!" disabled>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-2 control-label">Relative Sizing</label>
					    <div class="col-sm-10">
					        <div class="row">
					        	<div class="col-sm-2">
					        		<input type="text" class="form-control" placeholder=".col-sm-2" id="form-styles">
					        	</div>
					        </div>
					        <div class="row">
					        	<div class="col-sm-12">
					        		<p><small>Dynamic resizing col</small></p>
									<div class="progress progress-ui">
										<div class="progress-bar progress-bar-success slider-range" style="width: 100%;"></div>
									</div>
					        	</div>
					        </div>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-2 control-label">Textarea</label>
					    <div class="col-sm-10">
					        <textarea id="wysiwig_simple" class="form-control" rows="5" placeholder="Enter text..."></textarea>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-2 control-label">Extreme Textarea</label>
					    <div class="col-sm-10">
					        <textarea id="wysiwig_full" class="form-control" rows="5" placeholder="Enter text..."></textarea>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-2 control-label">Input groups</label>
					    <div class="col-sm-3">
					        <div class="input-group">
					        	<span class="input-group-addon"><i class="fa fa-github-square"></i></span>
					        	<input type="text" class="form-control" placeholder="GitHub">
					        </div>
					    </div>
					    <div class="col-sm-3">
					        <div class="input-group">
					            <input type="text" class="form-control" placeholder="Group">
					            <span class="input-group-addon"><i class="fa fa-group"></i></span>
					        </div>
					    </div>
					    <div class="col-sm-3">
					        <div class="input-group">
					            <span class="input-group-addon"><i class="fa fa-money"></i></span>
					            <input type="text" class="form-control" placeholder="Money">
					            <span class="input-group-addon"><i class="fa fa-usd"></i></span>
					        </div>
					    </div>
					</div>
					<div class="form-group">
					    <div class="col-sm-offset-2 col-sm-10">
					        <button type="cancel" class="btn btn-default"><i class="glyphicon glyphicon-time"></i> Cancel</button>
					        <button type="reset" class="btn btn-warning"><i class="glyphicon glyphicon-warning-sign"></i> Reset</button>
					        <button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-envelope"></i> Send layer</button>
					        <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-ok"></i> Submit</button>
					    </div>
					</div>
				</form>
        	</div>
        </div>
    </div> <!-- /container -->
    
	<script type="text/javascript">
        var placeholder = "Select OS";
        $( ".select2, .select2-multiple" ).select2( { placeholder: placeholder } );
    </script>

{% endblock %}